import React,{FC}  from 'react';
import { Layout,Row,Col,message } from 'antd';
// 引入样式文件
import "./index.css"
// 引入ant design图标
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { history } from 'umi';
import useStorage from '@/hooks/userStorage';
const { Header } = Layout;
// 声明类型
type Iprops={
  collapsed:boolean;
  changeCollapse:()=>void
}
//组件结构
const HeaderBase:FC<Iprops> = (props) => {
  let {collapsed,changeCollapse} = props
  let [,method]  = useStorage('qf-token')
  // console.log(method);
  return (
    <Header style={{ padding: 0}}>
    <Row>
      <Col span={8}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: changeCollapse,
          })}
      </Col>
      <Col span={8}>
          <h1 className='title'>中国人民银行监管系统</h1>
      </Col>
      <Col span={8}>
        <b onClick={()=>{
          // 退出登录
          // 清除token
          method.rm()
          // 回到登录页
          history.push("/login")
          message.open({
            type:'success',
            content:'退出成功'
          })
        }}>退出登录</b>
      </Col>
    </Row>
  </Header>
  );
};
export default HeaderBase;